<template>
    <el-form :model="formData" label-width="80px" ref="form" v-loading="loading" class="pr-4">
        <el-form-item label="企业名称" prop="company" required>
            <el-input v-model="formData.company" type="text" placeholder="请输入企业名称"/>
        </el-form-item>
        <div class="flex flex-row justify-between">
            <div class="w-full">
                <el-form-item
                    label="联系人"
                    prop="username"
                    auto-complete="off"
                    :rules="[{required: true,message: '联系人必须填写'}]"
                >
                    <el-input v-model="formData.username" placeholder="请填写联系人"/>
                </el-form-item>
                <el-form-item
                    label="手机号"
                    prop="phone"
                    :rules="[{required: true,message: '手机号必须填写'},{type: 'phone',message: '手机号格式不正确'}]"
                >
                    <el-input v-model="formData.phone" placeholder="请填写手机号"/>
                </el-form-item>
                <el-form-item label="密码" prop="password" :rules="passwordRules">
                    <el-input v-model="formData.password" type="password" show-password placeholder="请输入密码" autocomplete="new-password"/>
                </el-form-item>
                <el-form-item label="过期时间" prop="expiration_time" required>
                    <el-date-picker
                        v-model="formData.expiration_time"
                        type="datetime"
                        name="expiration_time"
                        placeholder="请选择过期时间"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        clearable
                    />
                </el-form-item>

<!--                <el-form-item label="校区" prop="school_id" :rules="[{ required: true, message: '请选择校区' }]">-->
<!--                    <el-tree-select-->
<!--                        v-model="formData.school_id"-->
<!--                        :default-expanded-keys="formData.school_id"-->
<!--                        :data="schools"-->
<!--                        value-key="id"-->
<!--                        check-strictly-->
<!--                        class="w-full"-->
<!--                        :props="{ label: 'name', value: 'id' }"-->
<!--                        clearable-->
<!--                        multiple-->
<!--                        show-checkbox-->
<!--                    />-->
<!--                </el-form-item>-->
            </div>

<!--            <div class="w-1/2" v-if="hasRoles">-->
<!--                <el-form-item label="部门" prop="department_id">-->
<!--                    <el-tree-select v-model="formData.department_id" :data="departments" check-strictly-->
<!--                                    :props="{ label: 'department_name', value: 'id' }"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="岗位" prop="department_id">-->
<!--                    <el-select v-model="formData.jobs" multiple>-->
<!--                        <el-option v-for="item in jobs" :key="item.id" :label="item.job_name" :value="item.id"/>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--            </div>-->
        </div>
        <div class="flex justify-end">
            <el-button type="primary" @click="submitForm(form)">{{ $t('system.confirm') }}</el-button>
        </div>
    </el-form>
</template>

<script lang="ts" setup>
// @ts-nocheck
import {useCreate} from '@/composables/curd/useCreate'
import {useShow} from '@/composables/curd/useShow'

import {onMounted, ref} from 'vue'
import http from '@/support/http'

const props = defineProps({
    primary: [String, Number],
    api: String,
    hasRoles: {
        type: Boolean,
        default: true
    }
})

const passwordRules = [
    {
        required: true,
        message: '密码必须填写'
    },
    // {
    //     pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/,
    //     message: '必须包含大小写字母和数字的组合，可以使用特殊字符，长度在6-20之间'
    // }
]

if (props.primary) {
    passwordRules.shift()
}

const {formData, form, loading, submitForm, close} = useCreate(props.api, props.primary)

if (props.primary) {
    useShow(props.api, props.primary, formData)
}

const emit = defineEmits(['close'])
close(() => emit('close'))

const departments = ref()
const jobs = ref()
const roles = ref()
const schools = ref()

onMounted(() => {
    http.get('school/school').then(r => {
        schools.value = r.data.data
    })
})
</script>
